<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <title>用户管理系统</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Arial', sans-serif;
            background-color: #F9FAFB;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        /* 顶部导航栏样式 */
        .navbar {
            width: 100%;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1000;
            background: linear-gradient(145deg, #6C63FF, #4E4BFF);
            padding: 15px 25px;
            font-size: 18px;
            color: white;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .navbar-brand {
            font-size: 24px;
            font-weight: bold;
            color: white;
            letter-spacing: 1px;
            text-transform: uppercase;
            transition: all 0.3s ease;
        }

        .navbar-brand:hover {
            color: #FFD700;
        }

        .navbar-nav img {
            margin-right: 15px;
            width: 25px;
            height: 25px;
            transition: transform 0.3s ease;
        }

        .navbar-nav img:hover {
            transform: scale(1.1);
        }

        .navbar-nav span {
            vertical-align: middle;
        }

        /* 左侧导航栏样式 */
        .sidebar {
            position: fixed;
            top: 60px;
            left: 0;
            bottom: 0;
            width: 220px;
            background-color: #2C3E50;
            color: #BDC3C7;
            padding-top: 20px;
            overflow-y: auto;
            box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.1);
        }

        /* 非悬停状态下的菜单项 */
        .sidebar .list-group-item {
            padding: 12px 20px;
            border: none;
            font-size: 16px;
            color: #BDC3C7;
            transition: background-color 0.3s, color 0.3s;
        }

        /* 鼠标悬停时的菜单项 */
        .sidebar .list-group-item:hover {
            background-color: #3498DB;
            color: #fff;
        }

        /* 图标和文本之间的间距 */
        .sidebar .list-group-item i {
            margin-right: 10px;
        }

        /* 主要内容区域 */
        .main-content {
            margin-left: 220px;
            margin-top: 80px;
            padding: 20px;
            display: flex;
            flex-direction: column;
            background-color: #FFFFFF;  /* 白色背景 */
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        /* 搜索和筛选部分 */
        .form-inline .form-group {
            margin-right: 15px;
        }

        .form-inline input,
        .form-inline select {
            width: 200px;
            padding: 8px;
            border-radius: 4px;  /* 增加圆角 */
            border: 1px solid #CED4DA;
        }

        .form-inline label {
            margin-right: 10px;
            font-size: 16px;
        }

        /* 按钮样式 */
        .btn-primary {
            background-color: #007BFF;  /* 蓝色 */
            border: none;
        }

        .btn-primary:hover {
            background-color: #0056B3; /* 深蓝色 */
        }

        /* 表格样式 */
        .table th,
        .table td {
            padding: 12px;
            text-align: center;
            font-size: 14px;
        }

        .table-striped tbody tr:nth-of-type(odd) {
            background-color: #F9F9F9; /* 浅灰色背景 */
        }

        .table-striped tbody tr:nth-of-type(even) {
            background-color: #FFFFFF; /* 白色背景 */
        }

        /* 按钮组 */
        .btn-group button {
            margin-right: 5px;
            padding: 8px 12px;
            border-radius: 4px;  /* 圆角 */
            border: 1px solid #D1D8E0;  /* 边框颜色 */
        }

        .btn-sm {
            font-size: 14px;
        }

        /* 分页导航 */
        .pagination {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }

        .pagination li {
            margin-right: 8px;
        }

        .pagination li a {
            padding: 8px 18px;
            background: linear-gradient(145deg, #8E44AD, #9B59B6);
            color: white;
            border-radius: 50px;
            font-size: 14px;
            text-decoration: none;
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .pagination li a:hover {
            background: linear-gradient(145deg, #9B59B6, #8E44AD);
            transform: scale(1.05);
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
        }

        .pagination li a:focus {
            outline: none;
        }

    </style>
</head>

<body>
<div class="container-fluid">
    <!-- 顶部导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light">
        <a class="navbar-brand" href="#">简单的用户管理系统</a>
        <div class="navbar-nav ml-auto">
            <div class="nav-item">
                <img src="user_avatar.jpg" alt="用户头像" width="30" height="30" class="rounded-circle">
                <span>用户名</span>
            </div>
        </div>
    </nav>
    <!-- 主要内容区域 -->
    <div class="main-content">
        <div class="row">
            <!-- 左侧导航栏 -->
            <div class="sidebar">
                <div class="list-group">
                    <a href="#" class="list-group-item list-group-item-action">
                        <span><i class="fas fa-cogs"></i></span> 系统管理
                    </a>
                    <a href="#" class="list-group-item list-group-item-action">
                        <span><i class="fas fa-users"></i></span> 用户管理
                    </a>
                </div>
            </div>
            <!-- 用户管理主要内容 -->
            <div class="col-md-9">
                <!-- 第一部分：搜索和筛选部分 -->
                <div class="row mb-4">
                    <div class="col-md-12">
                        <form class="form-inline">
                            <div class="form-group">
                                <label for="loginName">登录名称：</label>
                                <input type="text" class="form-control" id="loginName" placeholder="请输入登录名称">
                            </div>
                            <div class="form-group">
                                <label for="mobileNumber">手机号码：</label>
                                <input type="text" class="form-control" id="mobileNumber" placeholder="请输入手机号码">
                            </div>
                            <div class="form-group">
                                <label for="userStatus">用户状态：</label>
                                <select class="form-control" id="userStatus">
                                    <option value="active">启用</option>
                                    <option value="inactive">禁用</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="creationTime">创建时间：</label>
                                <input type="date" class="form-control" id="creationTime">
                            </div>
                            <button type="submit" class="btn btn-primary">查询</button>
                        </form>
                    </div>
                </div>
                <!-- 第二部分：用户信息表格 -->
                <div class="row mb-4">
                    <div class="col-md-12">
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <th>用户 ID</th>
                                <th>登录名称</th>
                                <th>用户姓名</th>
                                <th>部门</th>
                                <th>手机</th>
                                <th>用户状态</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>1</td>
                                <td>user1</td>
                                <td>张三</td>
                                <td>研发部</td>
                                <td>138xxxx1234</td>
                                <td>启用</td>
                                <td>2023-01-01</td>
                                <td>
                                    <div class="btn-group">
                                        <button class="btn btn-sm btn-primary">新增用户</button>
                                        <button class="btn btn-sm btn-warning">修改</button>
                                        <button class="btn btn-sm btn-danger">删除</button>
                                        <button class="btn btn-sm btn-success">启用</button>
                                        <button class="btn btn-sm btn-secondary">禁用</button>
                                        <button class="btn btn-sm btn-info">导出</button>
                                    </div>
                                </td>
                            </tr>
                            <!-- 更多用户记录 -->
                            </tbody>
                        </table>
                    </div>
                </div>
                <!-- 第三部分：分页导航 -->
                <div class="row">
                    <nav aria-label="Page navigation">
                        <ul class="pagination">
                            <li class="page-item"><a class="page-link" href="#">Previous</a></li>
                            <li class="page-item"><a class="page-link" href="#">1</a></li>
                            <li class="page-item"><a class="page-link" href="#">2</a></li>
                            <li class="page-item"><a class="page-link" href="#">3</a></li>
                            <li class="page-item"><a class="page-link" href="#">Next</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>


<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script>
    // 这里可以添加 JavaScript 交互逻辑，例如点击按钮的操作
    $('.btn-primary').click(function () {
        // 模拟查询操作
        console.log('执行查询');
    });
</script>
</body>

</html>